<template>
  <div class="category">
    <h2>{{ title }} 分类</h2>
    <slot>我是默认插槽，我是插槽默认值</slot>
  </div>
</template>

<script>
export default {
  props: ["title"],
};
</script>

<style scoped>
.category {
  padding: 20px;
  border-radius: 10px;
  color: white;
  width: 200px;
  background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

h2 {
  background-image: linear-gradient(
    to top,
    #fdcbf1 0%,
    #fdcbf1 1%,
    #e6dee9 100%
  );
  color: white;
  text-align: center;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}
</style>
